{{extend './layouts/layout.html'}}

{{block 'content'}}
<div class="container-fluid">
  <div class="page-title">
    <h1>写文章</h1>
  </div>
  <!-- 有错误信息时展示 -->
  <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <input type="hidden" name="currnet_id" value="{{article.article_id}}">
  <form class="row" id="addForm">
    <div class="col-md-9">
      <div class="form-group">
        <label for="title">标题</label>
        <input id="title" value="{{article.article_title}}" class="form-control input-lg" name="article_title" type="text" placeholder="文章标题">
      </div>
      <div class="form-group">
        <label for="content">标题</label>
        <!-- <textarea id="content" class="form-control input-lg" name="content" cols="30" rows="10"
          placeholder="内容"></textarea> -->
        
        <!-- 富文本编辑器 -->
        <div id="editor">
          <!-- art-template对原文输出的语法 -->
          {{@ article.article_body }}
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="form-group">
        <label for="slug">别名</label>
        <input id="slug" value="{{article.article_slug}}" class="form-control" name="article_slug" type="text" placeholder="slug">
        <p class="help-block">https://example.com/post/<strong>slug</strong></p>
      </div>
      <div class="form-group">
        <label for="feature">特色图像</label>
        <!-- show when image chose -->
        <img class="help-block thumbnail" id="previewImg" src="{{article.article_file}}">
        <input id="feature" class="form-control" name="article_file" type="file">
        <input type="hidden" name="original_file" id="original_file" value="{{article.article_file}}">
        <input type="hidden" name="new_file" id="new_file">
      </div>
      <div class="form-group">
        <label for="category">所属分类</label>
        <select id="category" class="form-control" name="article_cateid">
          {{each categories item}}
          <option value="{{item.cate_id}}" {{item.cate_id == article.article_cateid ? 'selected' : ''}}>{{item.cate_name}}</option>
          {{/each}}
        </select>
      </div>
      <div class="form-group">
        <label for="created">发布时间</label>
        <input id="created" value="{{article.article_addtime}}" class="form-control" name="article_addtime" type="datetime">
      </div>
      <div class="form-group">
        <label for="status">状态</label>
        <select id="status" class="form-control" name="article_status">
          <option value="草稿" {{article.article_status == '草稿' ? 'selected' : ''}}>草稿</option>
          <option value="已发布" {{article.article_status == '已发布' ? 'selected' : ''}}>已发布</option>
        </select>
      </div>
      <div class="form-group">
        <button class="btn btn-primary" type="submit">保存</button>
      </div>
    </div>
  </form>
</div>
{{/block}}

{{block 'script'}}
<script src="/node_modules/wangeditor/dist/wangEditor.min.js"></script>
<script>
  const $addForm = $('#addForm')

  // 富文本编辑器
  const E = window.wangEditor
  const editor = new E('#editor')
  console.log('editor---', editor)
  // 或者 const editor = new E( document.getElementById('editor') )
  editor.config.uploadImgServer = '/api/upload'  // 上传图片到服务器
  editor.config.uploadFileName = 'file' // 上传文件自定义文件名
  
  editor.create()

  $addForm.validate({
    rules: {
      article_title: {
        required: true
      },
      article_body: {
        required: true
      },
      article_slug: {
        required: true
      },
      article_file: {
        // required: true
      },
      article_cateid: {
        required: true
      },
      article_addtime: {
        required: true
      },
      article_status: {
        required: true
      }
    },
    messages: {},
    submitHandler: editArticle
  })

  $('input[name=article_file]').on('change', handleFileChange)

  /**
   * 方法区
  */
 function editArticlezxcxzcxzc() {
   console.log(12312313)
 }

  function handleFileChange() {
    console.log(this) // input
    console.log(this.files) // 上传的文件信息
    console.log(this.value) // 上传文件的绝对路径(包含文件名)
    const formData = new FormData()
    formData.append('file', this.files[0])
    $.ajax({
      url: '/api/upload',
      type: 'post',
      data: formData,
      dataType: 'json',
      contentType: false,// 不设置内容类型
      processData: false,// 不处理数据
      success: res => {
        console.log('上传成功res---', res)
        if (res.errno == 0) {
          const {url} = res.data[0]
          $('#previewImg').attr('src', url)
          $('#new_file').val(url)
        }
      },
      error: err => {
        console.log(err)
      }
    })
  }

  // 编辑文章
  function editArticle() {
    let formData = $addForm.serialize()
    formData = formData + '&article_body=' + editor.txt.html()
    console.log('formData---', formData)
    $.ajax({
      url: `/api/post/edit?id=${$('input[name=currnet_id]').val()}`,
      type: 'post',
      data: formData,
      dataType: 'json',
      success: res => {
        console.log('editArticleRes---', res)
        if (res.success) window.alert('编辑成功')
      },
      error: err => {
        console.log(err)
      }
    })
  }
</script>
{{/block}}